<template>
	<view>
		<view class="top-bg"></view>
		<!-- 顶部组件 -->
		<u-navbar :is-back="false" :background="top_bgc" :border-bottom="navBarBottom" id="nav-bar"><view class="nav-title">我的</view></u-navbar>
		<view class="user u-flex">
			<image class="avatar" :src="userInfo.avatarUrl || avatar_defult"></image>
			<view class="nickname">
				<text>{{ userInfo.nickName || '注册/登录' }}</text>
				<button class="login-btn" type="default" @click="wxLogin">登录</button>
			</view>
		</view>
		<!-- 订单模块 -->
		<view class="list-box">
			<view class="head u-flex">
				<view class="title">我的订单</view>
				<view class="more u-flex" @click="navigateTo('/pages/user/order/order')">
					<text>全部订单</text>
					<u-icon name="right" customPrefix="custom-icon"></u-icon>
				</view>
			</view>
			<view class="item">
				<view v-for="(item, index) in menu.order" :key="index" @click="navigateTo(item.jumpUrl)">
					<image :src="item.img"></image>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 功能模块 -->
		<view class="list-box">
			<view class="head u-flex"><view class="title">我的功能</view></view>
			<view class="item">
				<view v-for="(item, index) in menu.myFn" :key="index" @click="navigateTo(item.jumpUrl)">
					<image :src="item.img"></image>
					<view>
						<text v-if="!index && couponNum">{{ couponNum }}张</text>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<!-- 广告 -->
		<view class="profile-box"><image src="https://img.youpin.mi-img.com/yingkebao/474ce51241b8c117149eaab227b73f52.png"></image></view>
		<!-- 更多工具 -->
		<view class="list-box">
			<view class="head u-flex"><view class="title">更多工具</view></view>
			<view class="item">
				<view v-for="(item, index) in menu.tools" :key="index" @click="navigateTo(item.url)">
					<image class="tools-img" :src="item.img"></image>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="rec-goods-title">专属推荐</view>
		<mi-goods-list :dataList="goodsList" :isShowTitle="false" :loadMoreBg="loadingBg" :showLoadmore="showLoadmore" :loadMoreStatus="loadingStatus"></mi-goods-list>
		<mi-toast ref="miToast" />
	</view>
</template>

<script>
import menu from '@/common/userMenu.js'
import miGoodsList from '@/components/mi-goods-list.vue'
export default {
	data() {
		return {
			menu,
			top_bgc: {
				background: 'transparent'
			},
			navBarBottom: false,
			navBarHeight: 0,
			couponNum: 0,
			goodsList: [],
			dataOffset: 120,
			showLoadmore: false,
			loadingStatus: 'loadmore',
			loadingBg: '#f6f6f6',
			avatar_defult: 'http://bd.zhichi921.com/attachment/weitao/icon/user/head_pic_defult.png'
		}
	},
	components: {
		miGoodsList
	},
	onLoad() {
		this.getViewHeight()
		this.getRecGoods()
		if (this.isLogin) {
			this.getCouponCount()
		}
	},
	methods: {
		wxLogin() {
			if (this.isLogin) return
			uni.navigateTo({
				url: '/pages/user/login/login'
			})
		},
		getCouponCount() {
			this.$u.api.couponCount().then(res => {
				console.log(res)
				this.couponNum = res.data.count
			})
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('#nav-bar')
				.boundingClientRect(data => {
					this.navBarHeight = data.height
				})
				.exec()
		},
		getRecGoods() {
			let data = {
				type: 7,
				offset: this.dataOffset,
				limit: 20
			}
			this.$u.api.getRecommendGoods(data).then(res => {
				res.data.recommendResponseList.forEach(x => {
					this.goodsList.push(x.data.goods)
				})
				this.dataOffset += data.limit
				this.showLoadmore = true
				this.loadingStatus = 'loadmore'
			})
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		showToast(msg, type) {
			this.$refs.miToast.show({
				title: msg,
				type: type
			})
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > this.navBarHeight) {
			this.top_bgc.background = '#fff'
			this.navBarBottom = true
		} else {
			this.top_bgc.background = 'transparent'
			this.navBarBottom = false
		}
	},
	onReachBottom() {
		if (this.dataOffset >= 240) {
			return (this.loadingStatus = 'nomore')
		}
		this.loadingStatus = 'loading'
		this.getRecGoods()
	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}
.top-bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 427rpx;
	background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/b5231660-abb4-11ea-b244-a9f5e5565f30.png') no-repeat center / 750rpx 427rpx;
	border: 1px solid transparent;
	z-index: -1;
}

.nav-title {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 750rpx;
	text-align: center;
	// margin: 0 auto;
	// padding-left: 100rpx;
	font-size: 32rpx;
	letter-spacing: 2rpx;
	font-weight: bold;
}
.user {
	margin-top: 20rpx;
	margin-bottom: 40rpx;
	.avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		margin-left: 30rpx;
	}
	.nickname {
		position: relative;
		font-size: 30rpx;
		margin-left: 20rpx;
		font-weight: bold;
		color: #333;
		.login-btn {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
		}
	}
}

.list-box {
	width: 710rpx;
	margin: 0 auto 26rpx;
	padding-bottom: 40rpx;
	border-radius: 18rpx;
	background-color: #ffffff;
	overflow: hidden;
	// box-sizing: border-box;
	.head {
		height: 80rpx;
		padding: 0 28rpx;
		border-bottom: 1rpx solid #f5f5f5;
		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}
		.more {
			margin-left: auto;
			color: #999;
			font-size: 22rpx;
		}
	}
	.item {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #555;
		box-sizing: border-box;
		& > view {
			width: 25%;
			margin-top: 28rpx;
		}
		image {
			width: 80rpx;
			height: 80rpx;
		}
		.tools-img {
			width: 56rpx;
			height: 56rpx;
		}
	}
}
.profile-box {
	// padding: 0 20rpx;
	margin: 0 auto 20rpx;
	width: 710rpx;
	height: 146rpx;
	border-radius: 12rpx;
	overflow: hidden;
	image {
		width: 750rpx;
		height: 146rpx;
		transform: translateX(-20rpx);
	}
}
.rec-goods-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	padding-left: 20rpx;
	margin-top: 40rpx;
}
</style>
